<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index主界面</title>
<link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<!--自己定义的样式-->
<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}">
<!--动画CSS插件-->
<link rel="stylesheet" type="text/css" href="css/animate.min.css" th:href="@{/css/animate.min.css}">
<script src="js/jquery-3.2.1.min.js" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script src="js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>

<script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
<!--jquery单页面导航插件-->
</head>
<body>
<!-- 顶部导航 navbar-fixed-top置顶 导航条不遮蔽内容 并且一直显示 需要在body中设置 padding-top70px; -->
<nav th:replace="~{common/common::top}"></nav>

<!-- 广告轮播  -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 导航index -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- 轮播组件的内容-->
  <div class="carousel-inner wow lightSpeedIn" role="listbox">
    <div class="item active"> <img src="images/book.jpg"  alt="carousel_1"/> </div>
    <div class="item"> <img src="images/camera.jpg"   alt="carousel_2"/> </div>
    <div class="item"> <img src="images/plant.jpg" width="600" height="427"  alt="carousel_3"/> </div>
  </div>

  <!-- 向左向右的按钮 -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<hr class="feature-divider">

<!-- 主要内容 -->
<div class="container summary">

  <!-- 简介 -->
  <div class="row wow fadeInDown" data-wow-duration="3s" data-wow-delay="1s" id="summary-container">
    <div class="col-md-4"> <img class="img-circle " src="images/b1.jpg" alt="">
      <h2>书籍</h2>
      <p><a class="btn btn btn-danger btn-lg col-sm-offset-4 col-md-4"  th:href="@{/toShop(cid=1)}" role="button" >GO</a></p>
    </div>
    <div class="col-md-4"> <img class="img-circle" src="images/b4.jpg" alt="">
      <h2>数码</h2>
      <p><a class="btn btn-primary btn-lg col-sm-offset-4 col-md-4"  th:href="@{/toShop(cid=2)}" role="button">GO</a></p>
    </div>
    <div class="col-md-4"> <img class="img-circle" src="images/b9.png" alt="">
      <h2>交通</h2>
      <p><a class="btn btn-warning btn-lg col-sm-offset-4 col-md-4"  th:href="@{/toShop(cid=3)}" role="button">GO</a></p>
    </div>
    <div class="col-md-4"> <img class="img-circle" src="images/b8.png" alt="">
      <h2>运动</h2>
      <p><a class="btn btn-info btn-lg col-sm-offset-4 col-md-4"  th:href="@{/toShop(cid=4)}" role="button">GO</a></p>
    </div>
    <div class="col-md-4"> <img class="img-circle" src="images/b5.jpg" alt="">
      <h2>盆栽</h2>
      <p><a class="btn btn-success btn-lg col-sm-offset-4 col-md-4"  th:href="@{/toShop(cid=5)}" role="button">GO</a></p>
    </div>
    <div class="col-md-4"> <img class="img-circle" src="images/b7.png" alt="">
      <h2>杂货</h2>
      <p><a class="btn btn-primary btn-lg col-sm-offset-4 col-md-4" th:href="@{/toShop(cid=6)}" role="button">GO</a></p>
    </div>
  </div>
</div>

<script>
$(function(){

new WOW().init();
})
</script>
</body>
</html>
